<template>
    <div class="stage">
        <canvas class="canvas" ref="canvas"></canvas>
        <div class="bottom">
            <input class="text" type="text" v-model="txt">
            <div class="add-btn btn" @click="add">添加点</div>
            <div class="clear-btn btn" @click="clear">清空</div>
            <div class="draw-btn btn" :class="{drawing}" @click="draw">{{drawing ? "结束绘图" : "开始绘图"}}</div>
        </div>
        <Points :points="points" @close="showPoints=false" v-if="showPoints"/>
    </div>

</template>

<script>

import listener from '../../core/listener'
import Canvas2D from '../../core/view2d/Canvas2D'
import Points from '../Points/index'

export default {
    data(){
        return {
            url: './logo.png',
            txt: "",
            drawing: false,
            showPoints: false
        }
    },
    components: {
        Points
    },
    mounted(){
        this.txt = localStorage.getItem("points");

        new Canvas2D(this.$refs.canvas, window.innerWidth, window.innerHeight);
        
        listener.on("clipEnd", (url, blob, info)=>{
            this.preview = true;
            this.url = url;
            this.blob = blob;
            this.info = info;
        })

        listener.on("make", (points) => {
            console.log(points);
            this.points = points;
            this.showPoints = true;
        })
    },
    methods: {
        add(){
            console.log(this.txt);
            listener.emit("add", this.txt);
            localStorage.setItem("points", this.txt);
        },
        clear(){
            listener.emit("clear");
        },
        draw(){
            this.drawing = !this.drawing;
            listener.emit("draw", this.drawing);
        }
    },
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>